<template>
  <a-row justify="space-between" align="middle">
    <menu-unfold-outlined v-if="state.isCollapse" @click="collapseMenu"/>
    <menu-fold-outlined v-else @click="collapseMenu"/>

    <a-dropdown>
      <a-avatar shape="square" size="large" @click.prevent>
        <template #icon>
          <UserOutlined/>
        </template>
      </a-avatar>
      <template #overlay>
        <a-menu>
          <a-menu-item>
            <a href="javascript:;">提交反馈</a>
          </a-menu-item>
          <a-menu-item>
            <a href="javascript:;">我的信息</a>
          </a-menu-item>
          <a-menu-item>
            <a href="javascript:;" @click="loginOut">安全退出</a>
          </a-menu-item>
        </a-menu>
      </template>
    </a-dropdown>
  </a-row>
</template>

<script lang="ts" setup>
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  UserOutlined,
} from "@ant-design/icons-vue";
import {index} from "../stores/index";
import {reactive, computed} from "vue";
import router from "@/router";

const collapseMenu = () => {
  index().collapseMenu();
};

const state = reactive({
  isCollapse: computed(() => index().isCollapse),
});

function loginOut() {
  localStorage.clear();
  router.push("/login");
}
</script>

<style scoped>
:deep(.anticon) {
  transform: scale(1.8);
}

:deep(.ant-avatar) {
  cursor: pointer;
}
</style>
